<template>
  <div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
    <div class="ur container">
      <div class="ui middle aligned center aligned grid">
        <div class="column">
          <h2 class="ui teal image header">
            <div class="content">
              管理后台登录
            </div>
          </h2>
          <form class="ui large form">
            <div class="ui  segment">
              <div class="field">
                <div class="ui left icon input">
                  <i class="user icon"></i>
                  <input :style="uc" type="text" v-model="username" :placeholder="userPlaceholder" >
                </div>
              </div>
              <div class="field">
                <div class="ui left icon input">
                  <i class="lock icon"></i>
                  <input :style="pc" type="password" v-model="password" :placeholder="passPlaceholder">
                </div>
              </div>
              <a style="cursor: pointer" @click="login" class="ui fluid large teal button">登   录</a>
            </div>

            <div v-if="error">
              <div class="ui error mini message"></div>
              <div class="ui mini negative message">用户名和密码错误</div>
            </div>

          </form>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Login",
  data(){
    return{
      userPlaceholder: '用户名',
      passPlaceholder: '密码',
      username: '',
      password: '',
      uc: '',
      pc: '',
      error: 0
    }
  },
  mounted() {
    this.putColor();
  },
  methods:{
    putColor(){
      // this.uc = sessionStorage.getItem("uc");
      // this.pc = sessionStorage.getItem("pc");
      // this.error = sessionStorage.getItem("error");
      // sessionStorage.setItem("uc",'');
      // sessionStorage.setItem("pc",'');
      // sessionStorage.setItem("error", 0);
      // this.userPlaceholder = sessionStorage.getItem('up');
      // this.passPlaceholder = sessionStorage.getItem('pp');
    },
    login(){
      this.error = 0;
      // alert(12)
      if (this.username.length === 0 || this.password.length === 0){
        if (this.username.length === 0){
          this.uc = 'background-color: rgb(255, 246, 246); color: rgb(255, 246, 246)';
          this.userPlaceholder = '用户名不能为空';
          // sessionStorage.setItem('uc','background-color: rgb(255, 246, 246)');
          // sessionStorage.setItem('up','用户名不能为空');
        };
        if (this.password.length === 0){
          this.pc = 'background-color: rgb(255, 246, 246); color: rgb(255, 246, 246)';
          this.passPlaceholder = '密码不能为空';
          // sessionStorage.setItem('pc','background-color: rgb(255, 246, 246)');
          // sessionStorage.setItem('pp','密码不能为空');
        };
        // this.$store.commit('setUsernameColor');
      }else {
        axios({
          method:"post",
          url:"http://localhost:7070/admin/login",
          data:{
            username: this.username,
            password: this.password
          }
        }).then((res)=>{
          // alert(res);
          if (res.data === 1){
            sessionStorage.setItem('username',this.username);
            // alert(121212);
            this.$router.push({path: "/admin/blog"});
            // alert(1);
            // this.$store.commit('setTypeSuccess');
          }else {
            this.error = true;
            // sessionStorage.setItem("error",1);
          }
        });
      }
    }
  },
  watch:{
    username:function (){
      if (this.uc.length>0 && this.username.length>0){
        this.uc = '';
        this.userPlaceholder = '用户名';
        // sessionStorage.setItem('uc','');
      }
    },
    password:function (){
      if (this.pc.length>0 && this.password.length>0){
        this.pc = '';
        this.passPlaceholder = '密码';
        // sessionStorage.setItem('pc','');
      }
    }
    // up:function (){
    //   if (this.username.length>0){
    //     this.userPlaceholder = '用户名';
    //     sessionStorage.setItem('up','用户名');
    //   }
    // },
    // pp:function (){
    //   if (this.password.length>0){
    //     this.passPlaceholder = '密码';
    //     sessionStorage.setItem('pp','密码');
    //   }
    // }
  }
}
</script>

<style scoped>
/*input::-moz-placeholder{   !* Mozilla Firefox 19+ *!*/
/*  color:#FFF;*/
/*  opacity: 0.5;*/
/*}*/
/*::-webkit-input-placeholder {*/
/*  color: red;*/
/*}*/
/*::-moz-placeholder {*/
/*  color: red;*/
/*}*/
/*:-ms-input-placeholder {*/
/*  color: red;*/
/*}*/
</style>